<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/modules/user.js'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const form = reactive({
  username: '',
  password: ''
})

const login = async () => {
  try {
    loading.value = true
    // 使用TextEncoder将字符串转换为Uint8Array
    const test = form.password
    const encoder = new TextEncoder()
    const uint8 = encoder.encode(test)
    const arr = new Uint8Array(uint8.buffer)
    const base64 = btoa(String.fromCharCode(...arr)) // 或者使用更简洁的Array.from()
    // const base64ES6 = btoa([...uint8].map((byte) => String.fromCharCode(byte)).join(''))
    // form.password = base64
    await userStore.login({ username: form.username, password: base64 })
    loading.value = false
    router.push('/')
  } catch (error) {
    loading.value = false
  }
}

const loading = ref(false)

const systemName = ref(window.config.systemName)
</script>

<template>
  <div class="login-page">
    <div class="card">
      <img src="/login.jpg" class="img" />
    </div>
    <div class="card rigth">
      <div class="logo">
        <img src="/logo.png" class="img" />
        <span>{{ systemName }}</span>
      </div>
      <div class="login-form">
        <div class="login-text">请登录</div>
        <a-input size="large" v-model:value="form.username" addon-before="账号"></a-input>
        <span class="group-wrapper">
          <span class="wrapper">
            <span class="group-addon" style="border-start-end-radius: 0; border-end-end-radius: 0"
              >密码</span
            >
            <input
              type="password"
              class="password-content"
              style="border-start-start-radius: 0; border-end-start-radius: 0"
              v-model="form.password"
            />
          </span>
        </span>
        <a-button size="large" type="primary" @click="login" style="width: 100%" :loading="loading"
          >登录</a-button
        >
      </div>
    </div>
    <div class="footer">
      <a href="https://beian.mps.gov.cn/#/query/webSearch" target="">贵公网安备52011502009268号</a>
      <a href="https://beian.miit.gov.cn/" target="">黔ICP备2023015584号-4 </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .footer {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 100%;
    display: flex;
    gap: 20px;
  }

  .card {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    .img {
      width: 90%;
      object-fit: contain;
    }
  }

  .rigth {
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .logo {
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      line-height: 33px;
      letter-spacing: 0.04px;
      margin-bottom: 55px;

      .img {
        width: 33px;
        height: 33px;
        margin-right: 10px;
      }
    }

    .login-form {
      width: 50%;
      height: 40%;
      background-color: #fff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      padding: 0 10%;
      box-sizing: border-box;

      .login-text {
        width: 100%;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 33px;
        cursor: default;
      }
    }
  }
}
</style>

<style lang="scss">
.login-page {
  .group-wrapper {
    display: inline-block;
    width: 100%;
    text-align: start;
    vertical-align: top;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;

    .wrapper {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.88);
      font-size: 14px;
      line-height: 1.5714285714285714;
      list-style: none;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
      position: relative;
      display: table;
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;

      .group-addon {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-inline-end: 0;
        border-radius: 8px;
        position: relative;
        padding: 0 11px;
        color: rgba(0, 0, 0, 0.88);
        font-weight: normal;
        font-size: 14px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.02);
        border: 1px solid #d9d9d9;
        border-right: 0px;
        border-radius: 6px;
        transition: all 0.3s;
        line-height: 1;
        display: table-cell;
        width: 1px;
        white-space: nowrap;
        vertical-align: middle;
        box-sizing: border-box;
      }

      .password-content {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        float: inline-start;
        width: 100%;
        margin-bottom: 0;
        text-align: inherit;
        display: table-cell;
        box-sizing: border-box;
        touch-action: manipulation;
        -webkit-appearance: none;
        padding: 7px 11px;
        font-size: 16px;
        line-height: 1.5;
        border-radius: 8px;
        color: rgba(0, 0, 0, 0.88);
        margin: 0;
        list-style: none;
        position: relative;
        min-width: 0;
        background-color: #ffffff;
        background-image: none;
        border-width: 1px;
        border-style: solid;
        border-color: #d9d9d9;
        transition: all 0.2s;
      }
    }
  }

  .password-content {
    outline: none;

    &:focus {
      border-color: #2cd49f !important;
    }
  }
}
</style>
